<template>
  <a-modal
    :visible="visible"
    :title="statusAction ? '确认禁用' : '确认启用'"
    @ok="$emit('confirm')"
    @cancel="$emit('update:visible', false)"
    @visible-change="handleVisibleChange"
    :ok-text="statusAction ? '确认禁用' : '确认启用'"
    :cancel-text="'取消'"
    :ok-button-props="{ status: statusAction ? 'danger' : 'success' }"
    modal-class="status-confirm-modal"
  >
    <div class="status-confirm-content">
      <div class="status-icon" :class="{ disable: statusAction }">
        <icon-poweroff v-if="statusAction" />
        <icon-play-arrow-fill v-else />
      </div>
      <div class="status-info">
        <h3>您确定要{{ statusAction ? '禁用' : '启用' }}该品牌吗？</h3>
        <p>{{ statusAction ? '禁用后该品牌将不会在前台显示。' : '启用后该品牌将在前台正常显示。' }}</p>
        <p v-if="brand" class="brand-info">
          <span>品牌ID: {{ brand.id }}</span>
          <span>品牌名: {{ brand.name || '未设置' }}</span>
          <span>当前状态: {{ brand.visibility ? '启用' : '禁用' }}</span>
        </p>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
import { BrandRecord } from '@/api/brand'
import { IconPoweroff, IconPlayArrowFill } from '@arco-design/web-vue/es/icon'

// 定义组件属性
const props = defineProps<{
  visible: boolean
  category: CategoryRecord | null
  statusAction: boolean // true表示禁用操作，false表示启用操作
}>()

// 定义组件事件
const emit = defineEmits<{
  (e: 'update:visible', value: boolean): void
  (e: 'confirm'): void
}>()

// 处理对话框可见性变化
const handleVisibleChange = (val: boolean) => {
  emit('update:visible', val)
}
</script>

<style scoped lang="less">
@import '../styles/common.less';

:deep(.status-confirm-modal) {
  .arco-modal-header {
    border-bottom: 1px solid #f2f3f5;
    padding-bottom: 12px;
  }

  .arco-modal-footer {
    border-top: 1px solid #f2f3f5;
    padding-top: 12px;
  }
}

.status-confirm-content {
  display: flex;
  padding: 16px 0;

  .status-icon {
    font-size: 48px;
    color: #00b42a;
    margin-right: 16px;
    display: flex;
    align-items: center;

    &.disable {
      color: #f53f3f;
    }
  }

  .status-info {
    flex: 1;

    h3 {
      margin: 0 0 8px 0;
      font-size: 16px;
      color: #1d2129;
    }

    p {
      margin: 0 0 8px 0;
      color: #4e5969;
      font-size: 14px;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .category-info {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px dashed #e5e6eb;

      span {
        margin-right: 16px;
        font-weight: 500;
      }
    }
  }
}
</style>
